<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    * {
      box-sizing: border-box;
    }
    h1{
      text-align: center;
    }
    .box {
      width: 560px;
      height: 400px;
      margin: auto;
      background-color: pink;
    }
    img {
      width: 100%;
      height: 320px;
      display: block;
    }
    .bottom {
      height: 80px;
      background-color: green;
      padding: 10px 10px 0 10px;
    }
    .bottom p {
      margin: 0;
      color: white;
      margin-bottom: 10px;
      display: inline-block;
    }
    .bottom span{
        float: right;

    }
    span button{
        background-color: rgba(0, 0, 0,0.3);
        border-radius: 3px;
        font-size: 20px;
        color: #a7a2a2;
        border: 1px solid rgba(0, 0, 0,0);
    }
    .bottom-ul {
      width: 150px;
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      justify-content: space-between;
      align-items: center;
    }
    .bottom-ul li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }
    li.lihover {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
    </style>
</head>
<body>
  <h1>刘堉源</h1>
    <div class="box">
   <img src="../../../../images/webapi/第一单元/slider01.jpg" alt="">
    <div class="bottom">
      <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
      <span>
        <button class="zb"> < </button>
        <button class="yb"> > </button>
      </span>
      <ul class="bottom-ul">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>

  <script>

     const sliderData = [
      { url: '../作业图片/images/course01.png', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: '../作业图片/images/course02.png', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: '../作业图片/images/course03.png', title: '真正的jo厨出现了!', color: 'rgb(36, 31, 33)' },
      { url: '../作业图片/images/course04.png', title: '快来分享你的寒假日常吧~', color: 'rgb(139, 98, 66)' },
      { url: '../作业图片/images/course05.png', title: '李玉刚:让世界通过B站看到东方大国文化', color: 'rgb(67, 90, 92)' },
      { url: '../作业图片/images/course06.png', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: '../作业图片/images/course07.png', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: '../作业图片/images/course08.png', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]

    const pic = document.querySelector('img')
    const p = document.querySelector('p')
    const bc = document.querySelector('.bottom')
    const zb=document.querySelector('.zb')
    const yb=document.querySelector('.yb')

    let i=0
    let time=0
    time=setInterval(function(){
        i++
        if(i>=sliderData.length){
            i=0
        }
        pic.src = sliderData[i].url
        p.innerHTML = sliderData[i].title
        bc.style.backgroundColor = sliderData[i].color

        document.querySelectorAll('.bottom-ul li').forEach(li => {
            li.classList.remove('lihover')
        })

        const li = document.querySelector(`li:nth-child(${i+1})`)
        li.classList.add('lihover')
    },2000)

     yb.addEventListener('click',function(){
      i++
      if(i>=sliderData.length){
       i=0
      }
      pic.src = sliderData[i].url
      p.innerHTML = sliderData[i].title
      bc.style.backgroundColor = sliderData[i].color

      document.querySelectorAll('.bottom-ul li').forEach(li => {
          li.classList.remove('lihover')
      })

      const li = document.querySelector(`li:nth-child(${i+1})`)
      li.classList.add('lihover') 
      })
      zb.addEventListener('click',function(){
      i--
      if(i<0){
       i=7
      }
      pic.src = sliderData[i].url
      p.innerHTML = sliderData[i].title
      bc.style.backgroundColor = sliderData[i].color

      document.querySelectorAll('.bottom-ul li').forEach(li => {
          li.classList.remove('lihover')
      })

      const li = document.querySelector(`li:nth-child(${i+1})`)
      li.classList.add('lihover')
    })

    const box=document.querySelector('.box')
    box.addEventListener('mouseenter',function(){
      clearInterval(time)
    })
    box.addEventListener('mouseleave',function(){
      time=setInterval(function(){
        i++
        if(i>=sliderData.length){
            i=0
        }
        pic.src = sliderData[i].url
        p.innerHTML = sliderData[i].title
        bc.style.backgroundColor = sliderData[i].color

        document.querySelectorAll('.bottom-ul li').forEach(li => {
            li.classList.remove('lihover')
        })

        const li = document.querySelector(`li:nth-child(${i+1})`)
        li.classList.add('lihover')
    },2000)
    })
  </script>

</body>
</html>